// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, ListView, TouchableOpacity, ImageBackground, ScrollView, StyleSheet,InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { } from 'antd-mobile-rn';

// 引入 处理数据 所需文件
import { } from './module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { } from '../../components/index.js'

// 引入工具包
import { press, size, ScreenWidth , defaultDataList,onEndReached,onRefresh ,concatDataList,defaultPage} from '../../util/utils.js'

const styles = StyleSheet.create({
	vView: {
		position: "relative",
		height: 18
	},
	vRating: {
		flexDirection: "row",
		flexWrap: "wrap",
		width: ScreenWidth,
	},
	vRatingV: {
		position: "absolute",
		top: 0,
		left: 0,
	},
	rating: {
		fontFamily: "iconfont",
		fontSize: 34,
		color: '#ff6600',
		marginRight: 10,
		backgroundColor: "#ffffff",
		alignItems: "flex-start",

	},
	rating_n: {
		color: '#cccccc',
	}
})

class Rating extends Component {
	constructor(props) {
		super(props);
		// 定义总星级
		this.maxRating = this.props.maxRating ? this.props.maxRating : 5
		// @param {星级,如果不传,默认是满级,值为5} this.props.rating
		this.rating = this.props.rating <= this.maxRating && this.props.rating >= 0 ? this.props.rating : this.maxRating
		// @param {是否可编辑,如果不传,默认是不可编辑,值为false} this.props.editable
		this.editable = this.props.editable ? this.props.editable : false
		this.ratingArr = []
		this.dSource = (new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }))
		this.initPage()
		this.state = { rating: this.dSource.cloneWithRows(this.ratingArr) }
		this.props.selectStar = null
	}
	selectStar = (item, Windex) => {
		// 判断是否传入了可编辑
		if (this.editable == true) {
			this.rating = item.level
			this.setRatingChange()
			this.setState({ rating: this.dSource.cloneWithRows(this.ratingArr) })
			// 把值传递出去,如果为真,那么可以作为参数传递出去,如果为假,则无法传递出去
			this.props.selectStar ? this.props.selectStar(item.level) : ""
			return item.level
		} else {
			return false
		}
	}
	componentWillReceiveProps = (nextProps) => {
		this.maxRating = nextProps.maxRating ? nextProps.maxRating : 5
		this.rating = nextProps.rating ? (nextProps.rating >= 0 && nextProps.rating <= this.maxRating ? nextProps.rating : this.maxRating) : this.maxRating
		this.editable = nextProps.editable ? nextProps.editable : false
		this.props.selectStar = nextProps.selectStar ? nextProps.selectStar : null
		this.initPage()
	}
	// 处理函数
	initPage = () => {
		this.setRatingChange()
	}
	// 改变状态
	setRatingChange = () => {
		this.ratingArr = Array.from({ length: this.maxRating }).map((item, index) => {
			if (this.rating <= index + 1) {
				return {
					status: true,
					index,
					level: index + 1
				}
			} else {
				return {
					status: false,
					index,
					level: index + 1
				}
			}
		})
	}
	render() {
		return (
			<View style={styles.vView}>
				<View style={[styles.vRatingV, styles.vRating_s]}>
					<ListView
						contentContainerStyle={styles.vRating}
						dataSource={this.state.rating}
						renderRow={(item, index) => {
							if (this.rating < item.level) {
								return <Icon name="md-star-outline" style={{ marginRight: 3 }} size={18} color={'#cccccc'} />
							}
							return <Icon name="md-star" style={{ marginRight: 3 }} size={18} color={'#ff6600'} />
						}}
					/>
				</View>
			</View>
		)
	}
}

export default pureRender(Rating)
